<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>欢迎使用</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" href="../../../css/mui.min.css">
		<link rel="stylesheet" href="../../../css/iconfont.css" />
		<script src="../../../libs/jquery-1.11.2.min.js"></script>
		<script src="https://cdn.wilddog.com/js/client/current/wilddog.js"></script>
		<script src="../../../js/mui.min.js"></script>
		<script src="../../../js/app.js"></script>
		<script src="../../../js/core.js"></script>
		<script src="js/todo.js"></script>
		<style>
			.title {
				background-color: rgba(0, 0, 0, .25);
				font-weight: 400;
			}
			
			#list td {
				padding: 5px 5px;
			}
			
			#list tr:active {
				background-color: rgba(0, 0, 0, .25);
			}
			
			#popover {
				min-width: 282px;
				top: 50px !important;
				left: 40px !important;
			}
			
			.operate {
				text-align: center;
				margin-top: 20px
			}
		</style>
	</head>

	<body>
			<a class="mui-icon mui-icon-plus" id="open" href="#" style="position:fixed;right: 0px;bottom: 50px;width:100px; height:100px;z-index: 999;"></a>
			<nav class="mui-bar mui-bar-tab">
				<a class="mui-tab-item mui-active" href="#tabbar">
					<span class="mui-icon mui-icon-home"></span>
					<span class="mui-tab-label">未完成</span>
				</a>
				<a class="mui-tab-item" href="#tabbar-with-chat">
					<span class="mui-icon mui-icon-email"><span class="mui-badge">9</span></span>
					<span class="mui-tab-label">已完成</span>
				</a>
			</nav>
			<div class="mui-content">
				
				<div id="tabbar" class="mui-control-content mui-active">
					<ul class="mui-table-view mui-table-view-chevron todo" style="margin-top:0;display:none;" id="todolist">
					</ul>
				</div>
				<div id="tabbar-with-chat" class="mui-control-content">
					<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
						<div class="mui-loading">
							<ul class="mui-table-view mui-table-view-chevron todo" style="margin-top:0;display:none;" id="finishList">
							</ul>
						</div>
					</div>
				</div>
			</div>
			<!--长按区域-->
			<div id="operation" class="mui-popover">
				<div style="text-align:center;position:fixed;top:80px;width:90%;margin:0 5%;">
					<ul class="mui-table-view">
						<li class="mui-table-view-cell">操作</li>
						<li id="endli" class="mui-table-view-cell">完成</li>
					</ul>
				</div>
			</div>
			<!--点击编辑修改区域-->
			<div id="popover" class="mui-popover">
				<div class="mui-content-padded">
					<h4 id="title" style="text-align: center;margin-top: 20px;">新增数据</h4>
					<form class="mui-input-group" style="margin-top: 30px;">
						<div class="mui-input-row">
							<label>标题：</label>
							<textarea rows="1" class="mui-input-clear" id="name"></textarea>
						</div>
						<div class="mui-input-row">
							<label>时间：</label>
							<input type="date" class="mui-input-clear" id="dateval">
						</div>
						<div class="mui-input-row">
							<label>内容：</label>
							<textarea rows="2" class="mui-input-clear" id="content">></textarea>
						</div>
					</form>
					<input type="hidden" id="type" />
					<div id="add_div" class="operate mui-hidden">
						<button type="button" class="mui-btn mui-btn-blue" id="add">确定</button>
					</div>
					<div id="edit_div" class="operate mui-hidden">
						<!--<button type="button" class="mui-btn mui-btn-green" id="done" style="margin-right: 30px;">完成</button>-->
						<button type="button" class="mui-btn mui-btn-blue" id="update" style="margin-right: 30px;">保存</button>
						<button type="button" class="mui-btn mui-btn-red" id="del">删除</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script>
		mui.init({
			pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					contentrefresh: '正在加载...',
					callback: pulldownRefresh
				},
				up: {
					contentrefresh: '正在加载...',
					callback: pullupRefresh
				}
			},
			gestureConfig: {
				longtap: true
			}
		});
		mui.plusReady(function() {
			initTodos();//初试化缓存
			getTodoList();//加载未完成列表
			getFinishList();//初始化已完成列表
		});
	</script>

</html>